<template>
    <div id="pie-chart-main"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "LineChart",
        mounted() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('pie-chart-main'));
            // 绘制图表
            myChart.setOption({
                legend: {
                    icon:'circle',
                    textStyle:{
                        color: '#bbdaff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter:function(param){
                        return `${param.marker} ${param.name} : ${param.value}家`
                    }
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '43%'],
                    radius: ['28%', '43%'],
                    clockwise: true,
                    avoidLabelOverlap: true,
                    hoverOffset: 15,
                    label: {
                      normal: {
                        color: '#73DDFF',
                        lineHeight: 20,
                        show: true,
                        formatter: '{b} \n {c}家 \n \n',
                      },
                    },
                    labelLine: {
                      normal: {
                        align: 'right',
                        length: 10,
                        length2: 20,
                        lineStyle: {
                          width: 1
                        }
                      }
                    },
                    data: [{
                        'name': '警报区1',
                        'value': 8
                    }, {
                        'name': '警报区2',
                        'value': 3
                    }, {
                        'name': '警报区3',
                        'value': 5
                    }, {
                        'name': '警报区4',
                        'value': 1
                    }, {
                      'name': '警报区5',
                      'value': 4
                    }],
                }]
            })
        }
    }
</script>

<style scoped>

</style>
